<%@ page language="java" contentType="text/html; charset=UTF8"
	pageEncoding="UTF8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Na`Vi AppStore</title>
<script src="references/js/jquery-2.1.0.min.js"></script>
<script>
	$(document).ready(function() {
		$("#appimage").attr("multiple","");
		$("#price").prop("type","number");
		$("#price").attr("step","any");
		$("#uploadForm").submit(function(event) {

			//disable the default form submission
			event.preventDefault();

			//grab all form data  
			var formData = new FormData($(this)[0]);
			$('#login-box').show();
			$.ajax({
				url : 'uploadAppAction.jms',
				type : 'POST',
				data : formData,
				async : true,
				cache : false,
				contentType : false,
				processData : false,
				beforeSend: function(){
					$("#login-box").show();
				},
				success : function(returndata) {
					$("#login-box").hide();
					alert(returndata);
					if(returndata=="success"){
						window.location.href="/Struts_1.3_WebApp_FrameWork/directorUpload.jms";
					}
				}
			});

			return false;
		});
	});
</script>

</head>
<body>
	<tiles:insertTemplate template="/pages/masterpage/masterPage.jsp">
		<tiles:putAttribute name="body">
			<logic:empty name="username">
				<logic:forward name="/goHome" />
			</logic:empty>
			<logic:equal name="role" value="Member">
				<logic:forward name="/goDev" />
			</logic:equal>


			<html:form action="/uploadAppAction" method="post"
				styleId="uploadForm" enctype="multipart/form-data">




				<div class="col-xs-12 col-md-8 col-md-offset-2">
					<div class="panel panel-warning">
						<div class="panel-heading">
							<h3 class="panel-title">
								<i class="fa fa-cloud-upload"></i>Upload App
							</h3>
						</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-xs-6 col-sm-6 col-md-6">

									App Name
									<div class="form-group">

										<div class="input-group">

											<html:text property="appName" styleClass="form-control"
												styleId="appName"></html:text>

											<span class="input-group-addon primary"><span
												class="fa fa-check-square"></span></span>

										</div>



									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-6">

									App avatar
									<div class="form-group">

										
										<div class="col-xs-8" style="padding:0px">
											<input id="uploadAvt" placeholder="Choose File" class="form-control"
												disabled="disabled" />
												</div>
												
											<div class="fileUpload btn btn-primary">
												<span>Upload</span> 
												<html:file property="appAvatar" styleClass="upload"
												styleId="appavatar"></html:file>
												
											
											</div>
											
										
										
									</div>




								</div>
								<div class="col-xs-6 col-sm-6 col-md-6">
									Price:

									<div class="form-group">

										<div class="input-group">

											<html:text property="price" styleClass="form-control"
												styleId="price" />

											<span class="input-group-addon warning"><span
												class="fa fa-dollar"></span></span>
										</div>



									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-6">

									Application upload:
									
									<div class="form-group">

										
										<div class="col-xs-8" style="padding:0px">
											<input id="uploadFile" placeholder="Choose File" class="form-control"
												disabled="disabled" />
												</div>
												
											<div class="fileUpload btn btn-primary">
												<span>Upload</span> 
												<html:file styleId="appdata" property="appData" 
												styleClass="upload"></html:file>
												
											
											</div>
											
										
										
									</div>
									
									
								</div>


								<div class="col-xs-6 col-sm-6 col-md-6">

									Category:
									<div class="form-group">



										<html:select styleId="category" property="category"
											styleClass="form-control">
											<html:option value="OS">OS</html:option>
											<html:option value="Security">Security</html:option>
											<html:option value="Game">Game</html:option>
											<html:option value="Office">Office</html:option>
											<html:option value="Developer">Developer</html:option>
											<html:option value="Ebook">Ebook</html:option>
											<html:option value="Other">Other</html:option>
										</html:select>







									</div>
								</div>
								<div class="col-xs-6 col-sm-6 col-md-6">
									Application image preview upload:
									
									<div class="form-group">

										
										<div class="col-xs-8" style="padding:0px">
											<input id="uploadImg" placeholder="Choose File" class="form-control"
												disabled="disabled" />
												</div>
												
											<div class="fileUpload btn btn-primary">
												<span>Upload</span> 
												<html:file styleId="appimage" styleClass="upload"
												property="appImage"></html:file>
												
											
											</div>
											
										
										
									</div>

								



								</div>


								<div class="col-xs-6 col-sm-6 col-md-6">
									Version:

									<div class="form-group">

										<div class="input-group">

											<html:text styleId="version" property="version"
												styleClass="form-control">
											</html:text>

											<span class="input-group-addon info"><span
												class="fa fa-inbox"></span></span>
										</div>
									</div>




								</div>

								<div class="col-xs-6 col-sm-6 col-md-6">
									Require OS:

									<div class="form-group">

										<div class="input-group">

											<html:text styleId="requireos" property="requireOS"
												styleClass="form-control"></html:text>

											<span class="input-group-addon success1"><span
												class="fa fa-cogs"></span></span>
										</div>
									</div>




								</div>
								<div class="col-xs-12">

									Description:
									<html:textarea property="description" styleClass="form-control"
										style="height:100px" styleId="description"></html:textarea>



								</div>
							</div>
							<div class="panel-footer">

								<html:submit styleClass="btn btn-success">Upload App</html:submit>
							</div>
						</div>
					</div>
				</div>
			</html:form>
			<script type="text/javascript">
				document.getElementById("appavatar").onchange = function() {
					document.getElementById("uploadAvt").value = this.value;
				};
				document.getElementById("appdata").onchange = function() {
					document.getElementById("uploadFile").value = this.value;
				};
				document.getElementById("appimage").onchange = function() {
					document.getElementById("uploadImg").value = this.value;
				};
			</script>
		</tiles:putAttribute>
	</tiles:insertTemplate>
</body>
</html>